<template>
    <div id="picking_details">
        <el-dialog
        title="出库单"
        top="8vh"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose">
            <div slot="title">
                <span>出库单</span>
                <span style="font-size: 14px; color: #ff7068"> （{{stockoutStatus === 0 ? '待出库' : stockoutStatus === 1 ? '待发货' : stockoutStatus === 2 ? '已发货' : '未知'}}）</span>
            </div>
            <el-form v-model="formData" label-width="80" style="background: #fff1f1; border-radius: 4px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="调拨单号:">
                            <div class="grid-content">
                                {{formData.transferOrderId}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="品牌名称:">
                            <div class="grid-content">
                                {{formData.brandName}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="调出门店:">
                            <div class="grid-content">
                                {{formData.senderStore}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="调入门店:">
                            <div class="grid-content">
                                {{formData.receiverStore}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请日期:">
                            <el-tooltip class="item" effect="dark" :content="formData.gmtCreate" placement="top-start">
                                <div class="grid-content">
                                    {{formData.gmtCreate}}
                                </div>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="出库单号:">
                            <el-tooltip class="item" effect="dark" :content="formData.stockOutOrderId" placement="top-start">
                                <div class="grid-content">
                                    {{formData.stockOutOrderId}}
                                </div>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="出库人:">
                            <div class="grid-content">
                                {{formData.bizUser}} 
                            </div>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="4">
                        <el-form-item label="调拨件数:">
                            <div class="grid-content">
                                {{formData.totalTransfer}} 件
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="出库件数:">
                            <div class="grid-content">
                                {{formData.totalGoods}} 件
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出库时间:">
                            <div class="grid-content">
                                {{formData.gmtCompleted}} 
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
       
            <div class="picking_detail" v-if="logisticsData.length > 0" >
                <el-form label-width="80" style="background: #fff1f1; border-radius: 4px">
                    <el-row :gutter="20" v-for="(item, index) in logisticsData" :key= "index">
                        <el-col :span="4" >
                            <el-form-item label="出库人:">
                                <div class="grid-content">
                                    {{item.bizUser}}
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="出库状态:" >
                                <div class="grid-content"> 
                                    {{item.stockoutStatus === 0 ? '待出库' : item.stockoutStatus === 1 ? '待发货' : item.stockoutStatus === 2 ? '已发货' : '未知'}}
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" >
                            <el-form-item label="快递公司:" v-if="stockoutStatus !== 0">
                                <div class="grid-content">
                                    {{item.expressName}}
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="快递单号:" v-if="stockoutStatus !== 0">
                                <div class="grid-content">
                                    {{item.expressOrderId}}
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div id="picking_details_table_box">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <div class="grid-content bg-purple" max-height="400px">
                            <el-table stripe :data="tableData"  border>
                                <el-table-column label="品牌" prop="brandName" show-overflow-tooltip></el-table-column>
                                <el-table-column label="SKU" prop="skuCode" show-overflow-tooltip></el-table-column>
                                <el-table-column label="SPU" prop="spuCode" ></el-table-column>
                                <el-table-column label="规格" prop="specName"></el-table-column> 
                                <el-table-column label="调拨数量" prop="applyQty" width="80"></el-table-column>
                                <el-table-column label="出库数量" prop="pickingQty" width="80"></el-table-column>
                            </el-table>
                            <page :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
                        </div>
                    </el-col>
                    <!-- <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="details_list">
                                <el-card class="el-card-h3">
                                <h3 style="line-height: 38px; text-align:center; ">拣货明细</h3>
                                </el-card>
                                <div class="list-box">
                                    <el-card shadow="always" v-for="item in 10" :key="item">
                                        <div>
                                            <el-row :gutter="10" style="margin-bottom: 5px;">
                                                <el-col :span="16">
                                                    <div class="grid-content">
                                                        SKU:{{'123'}}
                                                    </div>
                                                </el-col>
                                                <el-col :span="8">
                                                    <div class="grid-content col_float_right">
                                                        {{'123'}}件
                                                    </div>
                                                </el-col>
                                            </el-row>
                                            <el-row :gutter="10">
                                                <el-col :span="8">
                                                    <div class="grid-content">
                                                        {{'拣货员'}}
                                                    </div>
                                                </el-col>
                                                <el-col :span="16">
                                                    <div class="grid-content col_float_right">
                                                        {{'2019/09/27-2019/09/28'}}
                                                    </div>
                                                </el-col>
                                            </el-row>  
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                    </el-col> -->
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import page from '../../commonComponents/page'
    export default {
        props: ['isShowDetails', 'stockoutId', 'transferId', 'stockoutStatus', 'stockOutOrderId'],
        components: {page},
        computed: {
            dialogVisible: {
                get() {
                    return this.isShowDetails
                },
                set() {}
            }
        },
        
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                formData: {},
                logisticsData: [],
                tableData: []
            }
        },
        mounted() {
           this.getPickingDetails()
           this.getPickingExpress()
           this.getPickingDetailGoodsList()
        },
        methods: {
            getPickingDetails() {
                try{
                    this.$server.stockControlApi.getPickingDetails(this.stockoutId).then(res => {
                        this.formData= res.data
                    })
                }catch(err){this.$paramsError(err)}
            },
            getPickingExpress() {
                try {
                    this.$server.stockControlApi.getPickingExpress(this.transferId).then(res => {
                        if(res.data.length > 0) {
                            res.data.forEach(item => {
                                if(item.stockOutOrderId == this.stockOutOrderId) {
                                    this.logisticsData.push(item)
                                }
                            })
                        }
                        //this.logisticsData= res.data
                    })
                }catch(err) {this.$paramsError(err)}
            },
            getPickingDetailGoodsList() {
                try{
                    let query= {
                        page: this.page,
                        size: this.size
                    }
                    this.$server.stockControlApi.getPickingDetailGoodsList(this.stockoutId, query).then(res => {
                        this.tableData= res.data
                        this.total= res.total
                    })
                }catch(err) {this.$paramsError(err)}
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
            handlePageChange(page) {
                this.page= page
                this.getPickingDetailGoodsList()
            },
            handleSizeChange(size) {
                this.size= size
                this.getPickingDetailGoodsList()
            }
        }
    }
</script>
<style lang="less" scoped>
    .details_list {
        position: relative;
        box-sizing: border-box;
        border: 1px solid #ff7068;
        //border-radius: 5px;
        min-height: 100px;
        max-height: 400px;
        overflow: hidden;
       
        h3 {
            box-shadow:  0px 1px 3px -1px rgba(225, 112, 104, 0.1);
            overflow: hidden;
            background: #ff7068;
            font-size: 12px;
        }
        .list-box {
            box-sizing: border-box;
            padding:0 10px;
            min-height: 60px;
            max-height: 360px;
            overflow: auto; 
        }
    }
</style>